<template>
	<view class="register">
	    <view class="register-headr">
	    	<image src="@/static/images/login/bianzu.png" mode="widthFix"></image>
	    </view>
		<view class="register-toback" @click="toback">
			<u-icon name="arrow-left"  size="22"></u-icon>
		</view>
		<view class="register-center">
			<view class="register-center-logo">
				<image src="@/static/images/login_logo.png" mode=""></image>
			</view>
			<view class="register-center-form">
				<view class="register-center-form-title">
					<text>新用户注册</text>
				</view>
				<view class="register-center-form-item" style="margin-top: 56rpx;">
					<view class="register-center-form-item-icon">
						<image src="@/static/images/login/phone.png" mode=""></image>
					</view>
					<view class="register-center-form-item-input">
						<u-input clearable border="none" v-model="form.username" maxlength="11" type="number"  placeholder="请输入手机号"></u-input>
					</view>
				</view>
				<view class="register-center-form-item">
					<view class="register-center-form-item-icon">
						<image src="@/static/images/login/yzm.png" mode=""></image>
					</view>
					<view class="register-center-form-item-input" style="margin-top: 10rpx;">
					<VerifyCode
						:islabel="false" 
						name="请输入验证码" :username="form.username"  v-model="form.verify_code" ></VerifyCode>
					</view>
				</view>
				<view class="register-center-form-item">
					<view class="register-center-form-item-icon">
						<image src="@/static/images/login/mima.png" mode=""></image>
					</view>
					<view class="register-center-form-item-input">
						<u-input v-show="captchaUrl" clearable border="none" v-model="form.password" maxlength="16"  type="text"  placeholder="请输入密码">
							 <u-icon v-if="form.password" @click="paswwType"  slot="suffix" :name="captchaUrl?'eye-off':'eye-fill'" ></u-icon>
						</u-input> 
						<u-input v-show="!captchaUrl" clearable border="none" v-model="form.password" maxlength="16"  type="password"  placeholder="请输入密码">
							 <u-icon v-if="form.password" @click="paswwType"  slot="suffix" :name="captchaUrl?'eye-off':'eye-fill'" ></u-icon>
						</u-input>
					</view> 
				</view>
				<view class="register-center-form-btn" @click="verify">
					<text>下一步</text>
				</view>
				<view class="register-center-form-agreement">
					<u-checkbox-group @change="changePact">
						<u-checkbox 
						labelColor="#B1B2B5"
						:checked="pact"
						size="16"
						shape="circle"
						></u-checkbox>
					</u-checkbox-group>
					<text>您已阅读并同意 <text @click="toPage('/pages/Pact/index?type=user_agreement')">《用户服务协议》</text>和 <text @click="toPage('/pages/Pact/index?type=privacy_agreement')">《隐私政策》</text></text>
				</view>
				<u-popup bgColor="transparent" round="32rpx" :show="show" @close="show = false">
					<view class="draw-lots-main-popup savepadding savebottom">
						<view class="header flex al-item ju-cont">
							<view class="header-title">
								疯传数藏平台服务协议
								<!-- {{agreement.title}} -->
							</view>
							<view class="header-close">
								<u-icon @click="show = false" name="close" color="#999999" size="22"></u-icon>
							</view>
						</view>
						<PayPactServe />
						<button @click="show=false;pact=true">我已阅读并同意</button>
					</view>
				</u-popup>
				<u-popup bgColor="transparent" round="32rpx" :show="show2" @close="show2 = false">
					<view class="draw-lots-main-popup savepadding savebottom">
						<view class="header flex al-item ju-cont">
							<view class="header-title">
								隐私政策
								<!-- {{agreement.title}} -->
							</view>
							<view class="header-close">
								<u-icon @click="show2 = false" name="close" color="#999999" size="22"></u-icon>
							</view>
						</view>
						<PayPactPrivacy/>
						<button @click="show2=false;pact=true">我已阅读并同意</button>
					</view>
				</u-popup>
				<!-- <view class="">
					
				</view> -->
			</view>
		</view>
	</view>
</template>
<script>
	import { mixin } from '@/Mixins/mixin.js'
	import VerifyCode from '@/components/verifycode.vue'
	import PayPactPrivacy from '@/components/PayPactPrivacy.vue';
	import PayPactServe from '@/components/PayPactServe.vue';
	export default {
		mixins: [mixin],
		components:{VerifyCode, PayPactPrivacy, PayPactServe},
		data(){
			return{
				form:{
					username:'',
					password:'',
					verify_code:''
				},
				pact:false,
				show:false,
				show2:false,
				captchaUrl:true
			}
		},
		methods:{
			paswwType(){
				this.captchaUrl=!this.captchaUrl
			},
			userAgreement(){
				this.show = true
			},
			userPrivacy(){
				this.show2 = true
			},
			changePact(e){
				if(e.length>0){
					this.pact = true
				}else{
					this.pact = false
				}
			},
			verify(){
				if(this.form.username.length<11){    //验证手机号
					uni.showToast({
					    title: '请输入正确的手机号！',
						icon:'none',
					})
					return
				}
				if(this.form.verify_code.length!==4){ // 验证验证码
					uni.showToast({
					    title: '请输入正确格式的验证码！',
						icon:'none',
					})
					return
				}
				
				if(this.form.password){   //验证 密码
					// let paw =  /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&.*])[\da-zA-Z~!@#$%^&.*]{8,16}$/
					// let result=  paw.test(this.form.password)
				
						if(!this.pact){   //验证 协议
							uni.showToast({
							    title: '请勾选协议后继续!',
								icon:'none',
							    duration: 2000
							})
						}else{
							this.register()
						}
				}else{
					
					uni.showToast({
					    title: '请输入密码！',
						icon:'none',
					})
					
				}
				
			},
			toback(){
				uni.navigateTo({
					url:'/pages/Login/index'
				})
			},
		async register(){
				let data = await this.$http({
					url:this.$api.register,
					method: 'POST',
					hideLoading: true,
					data:this.form
				})
				if(data.code===200){
					uni.showToast({
					    title: '注册成功！',
						icon:'none',
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/Login/index'
						})
					},1500)
				}else {
					uni.showToast({
					    title: data.msg,
						icon:'none',
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.register{
		background-color: #F9F8FF;
		width: 100vw;
		height: 100vh;
		&-headr{
			width: 100vw;
			image{
				width: 100%;
				height: 100%;
			}
		}
		&-toback{
			/*  #ifdef H5 */
			top: 34rpx;
			/* #endif */
			/*  #ifdef APP */
			top: calc(88rpx + 34rpx);
			/* #endif */
			left: 30rpx;
			position: absolute;
			z-index: 999;
			
		}
		&-center{
			&-logo{
				width: 180rpx;
				height: 180rpx;
              
				background: #FFFFFF;
				border-radius: 50%;
				border: 6rpx solid #F6F9FF;
				margin: auto;
				transform: translateX(-50%);
				margin-left: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				// margin-top: 14rpx;
				image{
					width: 135rpx;
					height: 135rpx;
				}
			}
			&-form{
				width: calc(100vw - 80rpx);
				margin: auto;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx 0px rgba(183,192,210,0.1300);
				border-radius: 40rpx;
				margin-top: -90rpx;
                padding-top: 154rpx;
				&-title{
					text-align: center;
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #16172F;
				}
				&-item{
					width: calc(100vw - 80rpx - 110rpx);
					height: 88rpx;
					background: #F5F9FF;
					border-radius: 55rpx;
					margin-left: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 28rpx;
					&-icon{
						width: 32rpx;
						height: 32rpx;
						margin-left: 36rpx;
						display: flex;
						image{
							width: 100%;
							height: 100%;
						}
					}
					&-input{
					
						width: calc(100% - 100rpx);
					    margin-left: 5rpx;
						
					}
				}
				&-btn{
					width: calc(100vw - 80rpx - 110rpx);
					height: 88rpx;
					background: #468EFF;
					border-radius: 55rpx;
					margin-left: 60rpx;
					margin-top: 60rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
				}
				&-agreement{
					display: flex;
					justify-content: center;
					margin-top: 22rpx;
					padding-bottom: 40rpx;
					text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
			}
		}
	}
	.draw-lots-main-popup {
		padding: 48rpx 38rpx;
		background: #1E2020;
		border-radius: 30rpx 30rpx 0px 0px;
		.header {
			display: flex;
			justify-content: space-between;
			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
			}
	
			&-close {}
		}
	
		.draw-lots-list {
			margin-top: 20rpx;
			height: 50vh;
			overflow-y: auto;
	
			.pay-pact {
				font-size: 24rpx;
				font-weight: 400;
				color: #A0A0A0;
				line-height: 34rpx;
			}
		}
	
		button {
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			background-color: #F2E0BC;
			line-height: 80rpx;
		}
	}
	::v-deep .uni-input-placeholder{
		font-size: 30rpx;
	}
</style>